<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图展示</title>
    <script src="../jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=d430ca41a38f56c6305e899b2263c747&plugin=AMap.MarkerClusterer"></script>
    <style>
        *,
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
            background-color: #2b2b2b;
        }

        #msg {
            position: fixed;
            top: 0;
            left: 0;
            width: 400px;
            height: auto;
            background: rgba(255, 255, 255, 0.6);
        }

        #msg div {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
        }

        #warnInfo {
            width: 100%;
            height: auto !important;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <div id="msg">
        <div id="device_name">
            <label for="">设备名称：</label>
            <font></font>
        </div>
        <div id="device_id">
            <label for="">设备ID：</label>
            <font></font>
        </div>
        <div id="device_addr">
            <label for="">设备地址：</label>
            <font></font>
        </div>
        <div id="device_latlng">
            <label for="">设备经纬度：</label>
            <font></font>
        </div>
        <div id="warnInfo" style="display: none;">
            <div id="warn_area">
                <label for="">区域：</label>
                <font></font>
            </div>
            <div id="warn_status">
                <label for="">状态：</label>
                <font></font>
            </div>
            <div id="warn_time">
                <label for="">报警时间：</label>
                <font></font>
            </div>
            <div id="warn_reason">
                <label for="">报警原因：</label>
                <font></font>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        const device_id = getQueryVariable('device_id')
        const scene_id = getQueryVariable('scene_id')
        const scene_id_list = scene_id ? scene_id : 'ff8080816f44f772016f463695e8005b,ff8080816fa34040016fa6e57ee40035,ff8080816f44f772016f46632d5300aa,ff8080816f8e24c4016f8e73c628000a,ff8080816f8e24c4016f8e740345000b'
        const warningType = {
            cover: ['COVER_DRIFT', 'OVERFLOW'],
            poison: ['CH4', 'O2', 'CO', 'H2S'],
            water: ['NH3-N', 'COD', 'SS', 'WATERLINE', 'FLOW_WATER', 'FLOW_VELOCITY'],
            hydrops: ['PONDING_STATE'],
            liquid: ['LEVEL_STATE', 'LEVEL_HEIGHT']
        }
        let map = new AMap.Map("map", {
            zoom: 7,
            mapStyle: "amap://styles/536f1fa685bf5fe484853c40bfd55c02",
            zoomEnable: false,
            dragEnable: true
        });
        axios.get(`/iot/dmp/v1/device/${device_id}`).then(function (res) {
            if (res.data.return_code == 'SUCCESS') {
                $('#device_name').find('font').text(res.data.device_name)
                $('#device_id').find('font').text(res.data.did)
                $('#device_addr').find('font').text(res.data.addr)
                $('#device_latlng').find('font').text(`${res.data.longitude}，${res.data.latitude}`)
                if (res.data.longitude && res.data.latitude) {
                    let markerIcon = ('./device.png')
                    let icon = new AMap.Icon({
                        size: new AMap.Size(32, 32),    // 图标尺寸
                        image: markerIcon,  // Icon的图像
                        imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
                        imageSize: new AMap.Size(32, 32)   // 根据所设置的大小拉伸或压缩图片
                    });
                    let marker = new AMap.Marker({
                        position: [res.data.longitude, res.data.latitude],
                        offset: new AMap.Pixel(0, 0),
                        icon: icon,
                        cursor: 'pointer',
                        zIndex: 9999
                    })
                    map.add(marker)
                    map.setFitView(marker)
                    axios.post('/iot/dmp/v1/warning/deviceWarnList', {
                        device_id,
                        warning_status: 'CREATED',
                        scene_id_list
                    })
                        .then(function (res) {
                            if (res.status == 200) {
                                let markers = [], warningIcon = ('./Marker.png');
                                res.data.data.list.map((v) => {
                                    const lngReg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
                                    const latReg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
                                    let lng = v.longitude, lat = v.latitude;
                                    $('#warnInfo').css('display', 'inline-block')
                                    $('#warn_area').find('font').text(v.area_name)
                                    $('#warn_status').find('font').text(v.warning_status == 'CREATED' ? '产生告警' : '' ||
                                        (v.warning_status == 'CLOSED') ? '关闭告警' : '' ||
                                            (v.warning_status == 'PROCESSING') ? '正在处理' : '' ||
                                                (v.warning_status == 'FINISH') ? '处理完成' : '')
                                    $('#warn_time').find('font').text(v.create_time)
                                    $('#warn_reason').find('font').text(v.details)
                                    if (lng && lat) {
                                        if (latReg.test(lat) && lngReg.test(lng)) {
                                            map.remove(marker)
                                            let WarnIcon = new AMap.Icon({
                                                size: new AMap.Size(32, 32),    // 图标尺寸
                                                image: warningIcon,  // Icon的图像
                                                imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
                                                imageSize: new AMap.Size(32, 32)   // 根据所设置的大小拉伸或压缩图片
                                            });
                                            let warnMarker = new AMap.Marker({
                                                position: [lng, lat],
                                                offset: new AMap.Pixel(0, 0),
                                                icon: WarnIcon,
                                                cursor: 'pointer',
                                                zIndex: 9999
                                            })
                                            markers.push(warnMarker)
                                        }
                                    }
                                })
                                map.add(markers)
                                map.setFitView(markers)
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        })

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }
    }
</script>

</html>